<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="./mui/login/css/mui.min.css" rel="stylesheet" />
    <link href="./mui/login/css/style.css" rel="stylesheet" />

    <script src="./dece/js/app.js" type="text/javascript"></script>
    <script src="./dece/js/vue.js" type="text/javascript"></script>
    <script src="./dece/js/axios.min.js" type="text/javascript"></script>

    <style>
        .area {
            margin: 20px auto 0px auto;
        }
        
        .mui-input-group {
            margin-top: 10px;
        }
        
        .mui-input-group:first-child {
            margin-top: 20px;
        }
        
        .mui-input-group label {
            width: 22%;
        }
        
        .mui-input-row label~input,
        .mui-input-row label~select,
        .mui-input-row label~textarea {
            width: 78%;
        }
        
        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }
        
        .mui-content-padded {
            margin-top: 25px;
        }
        
        .mui-btn {
            padding: 10px;
        }
        
        .link-area {
            display: block;
            margin-top: 25px;
            text-align: center;
        }
        
        .spliter {
            color: #bbb;
            padding: 0px 8px;
        }
        
        .oauth-area {
            position: absolute;
            bottom: 20px;
            left: 0px;
            text-align: center;
            width: 100%;
            padding: 0px;
            margin: 0px;
        }
        
        .oauth-area .oauth-btn {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-size: 30px 30px;
            background-position: center center;
            background-repeat: no-repeat;
            margin: 0px 20px;
            /*-webkit-filter: grayscale(100%); */
            border: solid 1px #ddd;
            border-radius: 25px;
        }
        
        .oauth-area .oauth-btn:active {
            border: solid 1px #aaa;
        }
        
        .oauth-area .oauth-btn.disabled {
            background-color: #ddd;
        }
    </style>

</head>

<body>
    <div id="app">
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">登录</h1>
        </header>
        <div class="mui-content">
            <form id='login-form' class="mui-input-group">
                <div class="mui-input-row">
                    <label>手机</label>
                    <input v-model="form.mobile" type="text" class="mui-input-clear mui-input" placeholder="请输入手机">
                </div>
                <div class="mui-input-row">
                    <label>密码</label>
                    <input v-model="form.password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
                </div>
            </form>
            <div class="mui-content-padded">
                <button @click="login" type="button" class="mui-btn mui-btn-block mui-btn-primary">登录</button>
                <div class="link-area">
                    <a href="./reg.html">注册账号</a>
                    <span class="spliter">|</span>
                    <a href="./forget_passwd.html">忘记密码</a>
                </div>
            </div>
            <div class="mui-content-padded oauth-area">

            </div>
        </div>
    </div>
    <script src="./mui/login/js/mui.min.js"></script>
    <script src="./mui/login/js/mui.enterfocus.js"></script>
    <script src="./mui/login/js/app.js"></script>
    <script>
        //mui初始化
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        new Vue({
            el: "#app",
            data: {
                form: {
                    mobile: null,
                    password: null,
                },
            },
            created: function (){
                // 验证是否登陆
                if (common.auth_login()) {
                    common.href("./index.html");
                }
            },
            mounted: function (){

            },
            methods: {
                login: function (){
                    // 拾取数据
                    var request = common.pickData(this.form, ['mobile', 'password']);
                    // console.log(request);
                    axios.post(de.api.login, request).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            window.localStorage.setItem("login", dd.token);
                            de.created();
                            mui.alert(dd.info, '成功', '确定', function(){
                                // 跳转商城
                                common.href('./shop/index.html');
                            }); 
                        } else {
                            mui.alert(dd.info, '失败', '确定'); 
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                }
            },
        });
    </script>
</body>

</html>
